<template>
  <div>
    <div class="map-sales-head">
      <common-card title="分类销售排行"> </common-card>
      <div class="map-sales-right">
        <el-radio-group v-model="radio1" size="mini">
          <el-radio-button label="品类"></el-radio-button>
          <el-radio-button label="商品"></el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="map-sales-button">
      <v-chart
        :options="getOptions()"
        :style="{ width: '100%', height: '100%' }"
      />
    </div>
    <!-- <div class="map-sales-left"></div> -->
  </div>
</template>
<script>
import CommonCardMixin from '../mixins/commonCardMixins.JS'
export default {
  mixins: [CommonCardMixin],
  data () {
    return {
      radio1: '品类'
    }
  },
  methods: {
    getOptions () {
      console.log(123456789)
      return {
        title: {
          text: '品类分布'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          top: '50%',
          left: 'right'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '50%'],
            // avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              // show: false,
              // position: 'left'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 15,
                fontWeight: 'bold'
              }
            },
            data: [
              { value: 52.36, name: '粉面粥店 | 15.40%' },
              { value: 75.82, name: '简餐便当 | 22.30%' },
              { value: 86.36, name: '汉堡披萨 | 25.40%' }
            ]
          }
        ]
      }
    }
  }
}
</script>
<style scoped lang="scss">
.map-sales-head {
  display: flex;

  .map-sales-right {
    margin-left: 330px;
    margin-top: -5px;
  }
}

.map-sales-left {
  margin-left: 50px;
}
.map-sales-button {
  width: 100%;
  height: 413px;
}
</style>
